<template>
	<div id="app">
		<header v-if="!$route.meta.keepAlive" class="header">
			<div class="home">
				<router-link to="/"><i class="iconfont">&#xe7a0;</i> 首页</router-link>
			</div>
			<div class="other">
				<div v-if="!$store.getters.getisLogin" class="login">
					<div>
						<router-link to="/login"> <i class="iconfont">&#xe6df;</i> 登录</router-link> |
					</div>
					<div>
						<router-link to="/register">
							<i class="iconfont">&#xe659;</i> 注册
						</router-link>
					</div>
				</div>
				<div class="isLogined" v-else>
					<div>
						<router-link to="/personal">
							<i class="iconfont">&#xe602;</i> 个人中心
							<i class="el-icon-caret-bottom" style="font-size: 10px;"></i>
						</router-link>
					</div>
					<div class="pull-down">
						<div class="pd-item">
							<a @click="faceRegister">人脸注册</a>
						</div>
						<div class="pd-item">
							<a @click="loginOut">退出登录</a>
						</div>
					</div>
				</div>
				<div class="type">
					<router-link to="/foodcategory">
						<i class="iconfont">&#xe613;</i> 分类
					</router-link>
				</div>
				<div class="shopcard">
					<router-link to="/ShoppingCart">
						<i class="iconfont">&#xe667;</i> 购物车
					</router-link>
				</div>
			</div>
		</header>

		<router-view />
	</div>
</template>

<script>
	import LoginService from './views/Login/LoginService.js';
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			loginOut() {
				LoginService.logoutService(res=>{
					if(res){
						this.$store.commit('changeLogin', '');
					}
				});
			},
			faceRegister(){
				this.$router.push('FaceRegister');
			}
		}
	}
</script>

<style lang="less">
	@import "./main.less";

	#app {
		height: calc(@viewport-height - @header-height);

		.header {
			height: @header-height;
			padding: 0 18%;
			background-color: #f5a8a8;
			line-height: @header-height;
			display: flex;
			justify-content: space-between;
			color: white; //字体颜色
			box-shadow: 0 2px 2px 0 rgba(245, 168, 168, 0.1);

			>div {
				display: flex;

				&:nth-child(1) {
					width: 400px;
				}

				&:nth-child(2) {
					width: 400px;
					justify-content: space-between;

					>div {

						display: flex;
					}
				}
			}

			a {
				font-family: "Helvetica Neue";
				font-size: 15px;
				text-decoration: none;
				color: white;
				font-weight: 400;
				letter-spacing: .1em;
				cursor: pointer;

				&:hover {
					color: dimgrey;
				}
			}
		}

		.isLogined {
			display: flex;
			flex-direction: column;

			&:hover {
				.pull-down {
					display: block;
					line-height: 30px;
					background-color: #f5a8a8;
					z-index: 100;
				}
			}
		}

		.pull-down {
			display: none;
		}

		.pd-item {
			margin-left: 18px;
		}
	}
</style>
